<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="800px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="样机DID" prop="did">
						<el-input v-model="form.did" placeholder="请输入样机编号" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="样机名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入样机名称" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="样机model" prop="model">
						<el-input v-model="form.model" placeholder="请输入样机model" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="硬件版本" prop="hardware_version">
						<el-input v-model="form.hardware_version" placeholder="请输入硬件版本" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="接收时间" prop="prototype_receive_time">
						<el-date-picker
							style="width: 100%;"
							v-model="form.prototype_receive_time"
							type="datetime"
							placeholder="请选择接收时间"
							default-time="12:00:00">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="位置" prop="localtion">
						<el-select v-model="form.localtion" placeholder="请选择位置" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in localtionOptions"
								:key="item.index"
								:label="item.name"
								:value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="客户">
						<el-select v-model="form.manufactor_id" placeholder="请选择客户" style="width:100%;" :disabled="num == 3">
							<el-option
								v-for="item in customerOptions"
								:key="item.index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="附件文档">
						<el-upload
							class="upload-demo"
							action="string"
							:headers="headers"
							:http-request="uploadFile"
							:on-remove="deleteFile"
							:before-upload="beforeUpload">
							<el-button size="small" type="primary">附件上传</el-button>
						</el-upload>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import { manufactorList, localtion } from '@/api/user'
import axios from "axios";
import moment from "moment";
export default {
	name: 'addForm',
	data(){
		return {
			headers:{'Content-Type':'multipart/form-data'},
			dialogFormVisible:false,
			form:{
				name:'',
				guidance_doc:[]
			},
			id:'',
			rules:{
				did: [
					{max: 50, message: '样机编号不能超过50个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机编号', trigger: 'blur' }
				],
				name: [
					{max: 36, message: '样机名称不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机名称', trigger: 'blur' }
				],
				model:[
					{max: 50, message: '样机model不能超过50个字符', trigger: 'blur'},
					{ required: true, message: '请输入样机model', trigger: 'blur' }
				],
				hardware_version:[
					{max: 20, message: '硬件版本不能超过20个字符', trigger: 'blur'},
					{ required: true, message: '请输入硬件版本', trigger: 'blur' }
				],
				prototype_receive_time:{required: true,message: '请选择接收时间',trigger: 'change'},
				localtion:{required: true,message: '请选择位置',trigger: 'change'}
			},
			optionsLeader:{},
			optionsSpare:{},
			num:0,
			title:'新增',
			customerOptions:[],
			localtionOptions:[],
			fileArr:[]
		}
	},
	created() {

	},
	methods:{
		deleteFile(file, fileList) {
			this.$message.success("成功移除!")
			this.fileArr.forEach((item,index) => {
				var arr = item.split('/')
				if(file.name == arr[arr.length-1] ){
					if(index != 0){
						this.fileArr.splice(index,index)
					}else {
						this.fileArr = []
					}
				}
			})
		},
		beforeUpload(file){
			var type = file.name
			type = type.split('.')[1]
		},
		//上传附件
		uploadFile(file) {
			let arr = []
			let url= `${process.env.VUE_APP_KANBAN_HOST}/api/v1/file`
			let fd = new FormData();
			fd.append('file',file.file);
			axios({
				url:url,
				data: fd,
				method:'post',
			}).then(res => {
				if(res.data.code === 200) {
					this.$message.success("上传成功!")
					this.fileArr.push(res.data.data['key'])
				}
			})
		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
			this.localtionOptions = []
			this.customerOptions = []
		},
		add(form){
			this.$refs[form].validate((valid) => {
				this.form.prototype_receive_time = moment(this.form.prototype_receive_time).format('YYYY-MM-DD HH:mm:ss')

				if (valid) {
					if(this.num == 1){
						var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/prototype`;
						this.form.guidance_doc = this.fileArr
						var data = this.form
						this.$axios.post(source,data,{headers: getHeader()})
							.then((response) => {
								if (response.status == 200) {
									this.dialogFormVisible = false
									this.form = {}
									this.$parent.initTable()
									this.$message.success("登记成功!")
								}
							}).catch((err) => {
							console.log(err);
						});
						this.localtionOptions = []
						this.customerOptions = []
					}
					if(this.num == 2){
						if(this.form.status == '正常'){
							this.form.status = 1
						}
						if(this.form.status == '禁用'){
							this.form.status = 0
						}
						var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/product/line/${this.id}`;
						var data = this.form
						this.$axios.post(source,data,{headers: getHeader()})
							.then((response) => {
								if (response.status == 200) {
									this.dialogFormVisible = false
									this.$parent.initTable()
								}
							}).catch((err) => {
							console.log(err);
						});
					}

				} else {
					return false;
				}
			});

		},
		initData(num,data){
			this.num = num
			if(data){
				this.id = data.id
			}

			manufactorList().then(res => {
				this.customerOptions = res.data
			})

			localtion().then(res => {
				res.data.filter(item => {
					this.localtionOptions.push({name:item})
				})
			})

			if(num == 1 || num == 2){
				var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/user/list?role=${'test_leader'}`;
				this.$axios.get(source,{headers: getHeader()})
					.then((response) => {
						if (response.status == 200) {
							this.optionsLeader = Object.assign({},response.data.data)
							this.optionsSpare = Object.assign({},response.data.data)
						}
					}).catch((err) => {
					console.log(err);
				});
			}
			if(num == 2){
				this.title = '编辑'
				this.form = Object.assign({},data)
				if(this.form.status == 1){
					this.form.status = '正常'
				}
				if(this.form.status == 0){
					this.form.status = '禁用'
				}
			}
			if(num == 3){
				this.title = '查看'
				this.form = Object.assign({},data)
				if(this.form.status == 1){
					this.form.status = '正常'
				}
				if(this.form.status == 0){
					this.form.status = '禁用'
				}
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
